<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":">
            <el-form-item :label="currentInfo.label" prop="title">
                <el-input v-model.trim="model.title" :placeholder="`请输入${currentInfo.label}`" clearable style="width: 100%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { 
    accountopeningAdd, accountopeningEdit, accountopeningDetail, 
    proxyownershipAdd, proxyownershipEdit, proxyownershipDetail, 
    advplatformAdd, advplatformEdit, advplatformDetail, 
}  from '@/api/advertisement'
export default {
    name: 'AccountDetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
        category: {
            type: String,
            default: '1',
        }
    },
    data() {
        const validateTitle = (rule, value, callback) => {
            if (value === '') {
            callback(new Error(`${this.currentInfo.label}不能为空`));
            } 
            callback();
        };
        return {
            model: {
                id: '',
                title: '',
            },
            rules: {
                title: [{ required: true, validator: validateTitle, trigger: ['blur', 'change'] }],
                // status: [{ required: true, message: '状态不能为空', trigger: ['blur', 'change'] }],
            },
            dict: { },
            save: false,
            list: [
                { label: '开户主体', value: '1', addRequest: accountopeningAdd, editRequest: accountopeningEdit, detailRequest: accountopeningDetail },
                { label: '代理归属', value: '2', addRequest: proxyownershipAdd, editRequest: proxyownershipEdit, detailRequest: proxyownershipDetail },
                { label: '广告平台', value: '3', addRequest: advplatformAdd, editRequest: advplatformEdit, detailRequest: advplatformDetail },
            ]
        }
    },
    computed: {
        currentInfo() {
            return this.list.find(item=>item.value == this.category)
        },
        title() {
            return `${this.type == 'edit' ? '编辑' : '新增'}${this.currentInfo.label}`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {},
    methods: {
        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            const { detailRequest } = this.currentInfo
            detailRequest(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                    // this.model.status = res.status === 'normal' ? 1 : 0
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                const params = { ...this.model }
                if (this.save) {
                    return
                }
                this.save = true
                const { addRequest, editRequest } = this.currentInfo
                if (this.type === 'edit') {
                    editRequest(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addRequest(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>

</style>
